<template>
	<view class="root f1 oh">
		<label :style="{ margin: `20rpx`, padding: `0 20rpx` }" class="height-70 bgc-f0f0f0 br-34">
			<uni-icons type="search" color="#ccc" />
			<input
				class="ml-12 f1 fs-28"
				type="text"
				placeholder="搜索"
				placeholder-style="color: #ccc"
				v-model="keywords"
				confirm-type="search"
				@confirm="search"
			/>
		</label>

		<scroll-view scroll-y @scrolltolower="getListData" class="f1 oh">
			<view class="ml-10 mr-10 mb-30 fd-row flex-wrap">
				<block v-for="(commodity, index) in commodities.list" :key="index">
					<navigator
						:url="`/pages/client/CommodityInfo?id=${commodity.id}`"
						class="ml-10 mr-10 bgc-fff br-20 oh"
						:style="{ width: `calc((100% - 40rpx) / 2)` }"
						hover-class="none"
					>
						<image
							class="width-100percent bgc-eee"
							:style="{ height: `268rpx` }"
							:src="commodity.cover_image"
							mode="aspectFill"
						/>
						<view :style="{ padding: `20rpx` }">
							<text class="ellipsis">{{ commodity.name }}</text>
							<view class="mt-26 fd-row ai-center jc-sb">
								<text class="color-ef1b1b fs-32">
									￥{{ Number(commodity.price).toFixed(2) }}
								</text>
								<view
									class="br-circle width-48 height-48"
									:style="{
										display: `flex`,
										alignItems: `center`,
										justifyContent: `center`,
										backgroundImage: `linear-gradient(-22deg, #f4a754, #f45455)`,
									}"
									hover-class="tap-hover"
									hover-stay-time="100"
									@click.stop="addShoppingCart(commodity.id)"
								>
									<uni-icons type="plusempty" color="#fff" size="18" />
								</view>
							</view>
						</view>
					</navigator>
					<label class="height-30" />
				</block>
			</view>

			<uni-load-more :status="loadStatus" />
		</scroll-view>
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";
	import { Pager } from "@/static/type";

	let requestFlag: boolean = false;
	@Component
	export default class Commodity extends Vue {
		// component property
		commodities: Pager<AnyObject> = { page: 1, list: [], size: 18 };
		loadStatus: string = "loading";
		keywords: string = "";

		onLoad() {
			this.getListData();
		}

		search() {
			this.commodities.list = [];
			this.commodities.page = 1;
			this.getListData();
		}

		onPullDownRefresh() {
			this.keywords = "";
			this.search();
		}
		onReachBottom() {
			this.getListData();
		}
		getListData() {
			const { $request, commodities } = this;

			if (requestFlag || !commodities.page) return;
			(requestFlag = true), (this.loadStatus = "loading");

			$request
				.get("/shop/productList", {
					page: commodities.page,
					size: commodities.size,
					keywords: this.keywords,
				})
				.then(({ data }) => {
					commodities.list.push(...data.data);
					commodities.page = data.current_page < data.last_page ? ++data.current_page : 0;
					this.loadStatus = commodities.page ? "more" : "noMore";
					this.loadStatus = "noMore";
				})
				.finally(() => {
					requestFlag = false;
					commodities.page > 1 || uni.stopPullDownRefresh();
				});
		}

		addShoppingCart(id: number) {
			uni.showLoading({ title: "Loading...", mask: true });
			this.$request
				.get("/shop/addCart", { id, num: 1 })
				.then(({ msg: title }) => uni.showToast({ title }));
		}
	}
</script>

<style lang="scss" scoped>
	// scss
</style>